<script lang="ts" setup>
import { withBase } from "vitepress";
import { FormCheckBox } from "../interface/func-view-form";

const props = defineProps<{
  data: FormCheckBox
}>()
</script>

<template>
  <div class="form-check-box">
    <div :class="['check-box-icon', props.data.disableSelect ? 'checked' : '']">
      <img v-if="props.data.disableSelect" :src="withBase('/svg/open.svg')" />
    </div>
    <div class="check-box-text">
      {{ data.text }}
    </div>
  </div>
</template>

<style scoped>
.form-check-box {
  display: flex;
  align-items: center;
  margin: 6px;
  cursor: not-allowed;
}

.check-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vp-c-divider);
  background: #f1f1f1;
  border-radius: 4px;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

html.dark .check-box-icon {
  background: #909399;
}

.form-check-box .check-box-icon.checked {
  border-color: #67c23a;
  background: #67c23a;
}

.check-box-icon img {
  max-width: 100%;
}
</style>